<!--
*@Author: QWP
*@Description: 请假申请
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog v-bind="$attrs"
    :title="title"
    @close="dialogClose">
    <a-layout class="f-h-100">
      <a-layout-content class="s-bg-white"
        style="overflow: auto">
        <a-space  direction="vertical" class="f-w-100">
          <u-busi-card title="基本信息"
            :bordered="false">
            <u-form :elements="formEls"
              :model="form"
              :gutter="0"
              ref="formRef">
            </u-form>
          </u-busi-card>

          <u-busi-card title="加班统计"  v-if="busiType != '3'">
            <MyVacation
              :data="jaData"
              :column="3"/>
          </u-busi-card>
        </a-space>
      </a-layout-content>
    </a-layout>
    <template #footerBefore>
      <a-button type="primary">提交</a-button>
      <a-button type="primary">撤回</a-button>
    </template>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { FormInstance, FormItemProps } from 'ant-design-vue';
import { _IColumnProps } from '@/components/common/tableEdit/interface.ts'
import { fileCols } from '@/common/model/fileCols'
import { regions } from '@/common/model/base'
import AuditFlowCheck from '@/views/oa/personnel/checkinEdit/auditFlow/AuditFlow.vue'
import { _IAuditFlow } from '@/views/oa/personnel/checkinEdit/auditFlow/interface.ts'
import { urlFile } from '@/util/common'
import dayjs from 'dayjs';
import MyVacation from '@/views/oa/personnel/myCheckIn/MyVacation.vue'

interface Props {
  busiType: string, // 1 请假   2 加班   3 离蓉
}
const props = defineProps<Props>()

const route = useRoute()

const title = computed(() => {
  let label = { '1': '请假编辑', '2': '加班编辑', '3': '离蓉编辑' }
  return label[props.busiType]
})

// 加班数据
const jaData = [
  { label: '累计加班天数', value: 10, total: 30, },
  { label: '已换休天数', value: 5, total: 10, },
  { label: '剩余天数', value: 5, total: 10, },
]

// 表单数据
const formRef = ref<FormInstance>()
const form = reactive({
  title: dayjs().format("YYYY-MM-DD")
})
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '90px',
  colon: false
}
const formEls: Array<_IFormEl> = computed(() => {
  return [
    { label: '申请部门', key: 'sqbm', col: { span: 8 }, element: 'input', 
      formItemProps: { ...formItemProps, required: true },
      componentProps: { disabled: true }
    },
    { label: '申请人', key: 'sqr', col: { span: 8 }, element: 'input', 
      formItemProps: { ...formItemProps, required: true },
      componentProps: { disabled: true }
    },
    { label: '申请时间', key: 'sqsj', col: { span: 8 }, element: 'datepicker', 
      formItemProps: { ...formItemProps, required: true },
      componentProps: { disabled: true, }
    },
    { label: '开始日期', key: 'zssj', col: { span: 8 }, element: 'datepicker', 
      formItemProps: { ...formItemProps, required: true },
      componentProps: { 
        showTime: props.busiType == '1',
        disabledDate: (current: Dayjs) => {
          if(current && form['jsrq']) {
            return dayjs(form['jsrq']).endOf('day') > current 
          }
        } 
      } 
    },
    { label: '结束日期', key: 'jsrq', col: { span: 8 }, element: 'datepicker', 
      formItemProps: { ...formItemProps, required: true },
      componentProps: { 
        showTime:  props.busiType == '1',
        disabledDate: (current: Dayjs) => {
          if(current && form['zssj']) {
            return dayjs(form['zssj']).endOf('day') < current 
          }
        } 
      } 
    },
    { label: '天数', key: 'ts', col: { span: 8 }, element: 'number', 
      formItemProps: { ...formItemProps, },
      componentProps: { disabled: true, }
    },
    { label: '请假类型', key: 'swbm', col: { span: 8 }, element: 'select', hide: props.busiType != '1',
      formItemProps: { ...formItemProps, required: true},
      componentProps: { 
        options: [
          { label: '加班', value: '1'},
          { label: '病假', value: '2'},
          { label: '年假', value: '3'},
          { label: '事假', value: '4'},
        ]
      }
    },
    { label: '前往地区', key: 'qwdq', col: { span: 8 }, element: 'cascader',  hide: props.busiType != '3',
      formItemProps: { ...formItemProps, required: true },
      componentProps: { 
        options: regions
      }
    },
    { label: '事由', key: 'sy', col: { span: 24 }, element: 'textarea', 
      formItemProps: { ...formItemProps, required: true } 
    },
    { label: '附件', key: 'file', col: { span: 24 }, element: 'file', 
      formItemProps: { ...formItemProps, required: true } 
    },
  ]
})

// 弹窗关闭
const dialogClose = () => {
  formRef.value.form.resetFields();
}
</script>

<style lang='scss' >
</style>